<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
   <div id="app" @click="divClick">
      {{message}}
      <!-- .stop 阻止时间冒泡 -->
      <button @click.stop="btnClick">点击</button>

     <!-- .prevent 自己处理提交检测 不需要自动跳转 -->
     <form action="/submit">
       <input type="submit" @click.prevent="submitClick" />
     </form>

      <!-- keyup 监听文本框变换就会触发事件 -->
     <input type="text" @keyup="keyup" /> <br/>
     <!-- keyup.enter 文本框输入完，按回车才会触发 -->
     <input type="text" @keyup.enter="keyup" />


    </div>


       <script src="js/vue.js"></script>
       <script>
         const app=new Vue({
           el: '#app',
           data: {
             message:'你好vue',
           },
           methods:{
             btnClick(){
               console.log("btnClick");
             },
             divClick(){
               console.log("divClick");
             },
             submitClick(){
               console.log("submitclick");
             },
             keyup(){
               console.log("keyup");
             }
           }
         })
       </script>
</body>
</html>